<script lang="ts" setup>
import { onMounted, ref, watchEffect } from 'vue'
import message from '@arco-design/web-vue/es/message'
import { userQuestionList } from '@/request/request'
import { useRouter } from 'vue-router'
import moment from "moment"

const router = useRouter()
const show = ref(true)
const loading = ref(false)
const dataList = ref([])
const searchParams = ref({
  title: '',
  tags: [],
  pageSize: 20,
  current: 1,
})
const total = ref(0)

const tagColors = ['#3b71ca', '#54B435', '#FFB534', '#A460ED', '#16A085']

const loadData = async () => {
  try {
    loading.value = true
    const res = await userQuestionList(searchParams.value)
    if (res.data.code === 0) {
      dataList.value = res.data.data.records
      total.value = res.data.data.total
    } else {
      message.error('加载失败: ' + res.data.message)
    }
  } catch (error) {
    message.error('请求失败，请检查网络')
  } finally {
    loading.value = false
  }
}

const columns = [
  {
    title: '题号',
    dataIndex: 'id',
    width: 100,
    align: 'center'
  },
  {
    title: '题目名称',
    dataIndex: 'title',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '标签',
    slotName: 'tags',
    width: 200
  },
  {
    title: '通过率',
    slotName: 'acceptedRate',
    width: 160,
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '提交数',
    dataIndex: 'submitNum',
    width: 100,
    align: 'center'
  },
  {
    title: '创建时间',
    slotName: 'createTime',
    width: 140
  },
  {
    slotName: 'optional',
    width: 100,
    fixed: 'right'
  }
]

const onPageChange = (page: number) => {
  searchParams.value.current = page
}

const toDo = (question: any) => {
  router.push(`/view/question/${question.id}`)
}

const doSubmit = () => {
  searchParams.value.current = 1
  loadData()
}

onMounted(loadData)
watchEffect(loadData)
</script>

<template>
  <div id="question" class="question-container">
    <div class="header">
      <a-typography-title :heading="4" class="title">题目列表</a-typography-title>
      <div class="search-box">
        <a-form
          :model="searchParams"
          layout="inline"
          @submit="doSubmit"
          auto-label-width
        >
          <a-form-item field="title" label="题目名称">
            <a-input
              v-model="searchParams.title"
              placeholder="输入题目名称"
              allow-clear
              class="search-input"
            />
          </a-form-item>
          <a-form-item field="tags" label="标签筛选">
            <a-input-tag
              v-model="searchParams.tags"
              placeholder="输入标签并回车"
              allow-clear
              class="tag-input"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" shape="round">
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>

    <a-table
      :columns="columns"
      :data="dataList"
      :loading="loading"
      :pagination="{
        showPageSize: true,
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        total: total,
        showJumper: true,
        showTotal: true
      }"
      row-key="id"
      hoverable
      stripe
      class="question-table"
      @page-change="onPageChange"
    >
      <template #tags="{ record }">
        <a-space wrap>
          <a-tag
            v-for="(tag, index) in record.tags"
            :key="index"
            :color="tagColors[index % tagColors.length]"
            bordered
          >
            {{ tag }}
          </a-tag>
        </a-space>
      </template>

      <template #acceptedRate="{ record }">
        <a-tooltip :content="`通过数: ${record.acceptedNum} / 提交数: ${record.submitNum}`">
          <div class="rate-progress">
            <a-progress
              :percent="record.submitNum ? (record.acceptedNum / record.submitNum) : 0"
              :show-text="false"
              size="small"
              class="progress-bar"
            />
            <span class="rate-text">
              {{ (record.submitNum ? (record.acceptedNum / record.submitNum * 100).toFixed(1) : 0) }}%
            </span>
          </div>
        </a-tooltip>
      </template>

      <template #createTime="{ record }">
        <span class="time-text">
          {{ moment(record.createTime).format('YYYY-MM-DD') }}
        </span>
      </template>

      <template #optional="{ record }">
        <a-button
          type="primary"
          shape="round"
          @click="toDo(record)"
          class="do-btn"
        >
          开始做题
        </a-button>
      </template>

      <template #empty>
        <a-empty description="暂无题目数据" />
      </template>
    </a-table>
  </div>
</template>

<style scoped lang="less">
.question-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;

    .title {
      margin: 0;
      color: var(--color-text-1);
    }

    .search-box {
      flex: 1;
      min-width: 300px;
      max-width: 600px;

      .search-input {
        width: 200px;
      }

      .tag-input {
        width: 240px;
      }
    }
  }

  .question-table {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    :deep(.arco-table-th) {
      background-color: var(--color-fill-2);
      font-weight: 500;
    }

    :deep(.arco-table-tr) {
      transition: background-color 0.2s;

      &:hover {
        background-color: var(--color-fill-1);
      }
    }

    .rate-progress {
      display: flex;
      align-items: center;
      gap: 8px;

      .progress-bar {
        flex: 1;
        max-width: 80px;
      }

      .rate-text {
        color: var(--color-text-2);
        font-size: 12px;
      }
    }

    .time-text {
      font-family: monospace;
      color: var(--color-text-3);
      font-size: 13px;
    }

    .do-btn {
      padding: 0 12px;
      transition: transform 0.2s;

      &:hover {
        transform: translateY(-1px);
      }
    }
  }

  @media (max-width: 768px) {
    padding: 12px;

    .header {
      flex-direction: column;
      align-items: stretch;

      .search-box {
        width: 100%;
        max-width: none;
      }
    }

    .question-table {
      :deep(.arco-table-th) {
        padding: 12px;
      }

      :deep(.arco-table-td) {
        padding: 12px;
      }
    }
  }
}
</style>
